<template>
  <div class="main_content">
    <p class="page_title">实名认证记录</p>

    <el-form ref="ruleFormRef" :inline="true" :model="formInline" class="form">
      <el-form-item label="会员编号" prop="no">
        <el-input v-model="formInline.no" placeholder="会员编号" clearable />
      </el-form-item>
      <el-form-item label="会员昵称" prop="name">
        <el-input v-model="formInline.name" placeholder="会员昵称" clearable />
      </el-form-item>
      <el-form-item label="姓名" prop="realname">
        <el-input v-model="formInline.realname" placeholder="姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formInline.phone" placeholder="手机号" clearable />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formInline.status" placeholder="状态" clearable>
          <el-option label="上架" value="1" />
          <el-option label="下架" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="认证日期" prop="date">
        <el-date-picker
          v-model="formInline.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" class="table">
      <el-table-column prop="no" label="会员编号" />
      <el-table-column prop="no" label="会员昵称" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="ID" label="身份证号" />
      <el-table-column prop="bankCard" label="银行卡号" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="date" label="认证时间" />
      <el-table-column prop="notes" label="备注" />
    </el-table>
  </div>
</template>

<script setup name="AuthenticationRecord">
defineOptions({
  name: "AuthenticationRecord"
});
import { reactive, ref } from "vue";

const ruleFormRef = ref();
const formInline = reactive({
  no: "",
  name: "",
  realname: "",
  phone: "",
  status: "",
  date: ""
});

// 查询
const onSubmit = () => {
  console.log("submit!", formInline);
};

// 重置
const onReset = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  console.log("onReset!", formInline);
};

const tableData = [
  {
    no: "1",
    name: "Tom",
    phone: "18524569845",
    ID: "4255854123698745",
    bankCard: "620015878965412587412",
    status: "1",
    date: "2016-05-02",
    notes: "无"
  },
  {
    no: "2",
    name: "Tom",
    phone: "18524569845",
    ID: "4255854123698745",
    bankCard: "620015878965412587412",
    status: "1",
    date: "2016-05-02",
    notes: "无"
  }
];
</script>
